<template>
  <dialog-form
    ref="form"
    class="resource-upload-container"
    :showSubmitButton="false"
    :form="form"
    :showFoot="false"
    :formItems="formItems"
    :labelWidth="labelWidth"
  >
  </dialog-form>
</template>
<script>
import dialogForm from './mixins/dialogForm'
import { mapGetters } from 'vuex'
import api from "@/api/common/index";
export default {
  name: 'ResourceUpload',
  mixins: [dialogForm],
  components: {
  },
  props: ['resourceType', 'uploadOption', 'fixed'],
  inject: ['uploadOption'],
  data () {
    return {
      labelWidth: '220px',
      form: {
        uploadFile: this.resourceType === 'insertimage' || this.resourceType === 'attachment' ? [] : '',
        mark: false,
        addToRes: false,
        spaceId: ''
      },
      tree: {
        loading: false,
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    }
  },
  computed: {
    ...mapGetters(['siteExtendConfig']),
    watermarkSet () {
      return this.siteExtendConfig.cfg.watermarkSet
    },
    formItems () {
      switch (this.resourceType) {
        case 'insertimage':
          return [
            {
              prop: 'uploadFile',
              label: '选择文件',
              type: 'multiImageUpload',
              option: {
                autoUpload: false,
                isImageDesc: false,
                fixed: this.fixed,
                defaultFileName: '',
                 // type: [],
                size: 10, // 图片大小
                unit: 'MB', // 图片大小单位
                type: ['jpg', 'jpeg', 'gif', 'png', 'bmp'],
                ...this.uploadOption
              }
            },
          ]
        case 'insertvideo':
          return [
            {
              prop: 'uploadFile',
              label: '选择文件',
              type: 'videoUpload',
              option: {
                autoUpload: false,
                fixed: this.fixed,
                defaultFileName: '',
                size: 20, // 图片大小
                unit: 'MB', // 图片大小单位
                type: ['mov', 'mp4', 'rmvb', '3gp', 'mkv'],
                ...this.uploadOption
              }
            }
          ]
        case 'music':
          return [
            {
              prop: 'uploadFile',
              label: '选择文件',
              type: 'audioUpload',
              option: {
                autoUpload: false,
                fixed: this.fixed,
                defaultFileName: '',
                size: 20, // 图片大小
                unit: 'MB', // 图片大小单位
                type: ['mp3', 'wav', 'ogg', 'acc'],
                ...this.uploadOption
              }
            }
          ]
        case 'attachment':
          return [
            {
              prop: 'uploadFile',
              label: '选择文件',
              type: 'fileUpload',
              option: {
                autoUpload: false,
                fixed: this.fixed,
                defaultFileName: '',
                typeLimit: 1,
                enableType: '',
                disableType: '',
                size: 10, // 图片大小
                unit: 'MB', // 图片大小单位
                ...this.uploadOption
              }
            }
          ]
        default:
          return [
            {
              prop: 'uploadFile',
              label: '选择文件',
              type: 'imageUpload',
              option: {
                autoUpload: false,
                fixed: this.fixed,
                // type: [],
                size: 10, // 图片大小
                unit: 'MB', // 图片大小单位
                type: ['jpg', 'jpeg', 'gif', 'png', 'bmp'],
                ...this.uploadOption
              }
            }
          ]
      }
    },
    getResourceType () {
      let type = ''
      switch (this.resourceType) {
        case 'insertvideo':
          type = 2
          break
        case 'music':
          type = 3
          break
        case 'attachment':
          type = 4
          break
        default:
          type = 1
      }
      return type
    }
  },
  methods: {
    getHtml (url, name,id) {
      let html = ''
      switch (this.resourceType) {
        case 'insertvideo':
          if (url.substr(-4) === '.flv') {
            html = `<p style="height:0px"></p><p><embed src='${url}' style='max-width:750px' /></p>`
          } else {
            html = `<p style="height:0px"></p><p><video controls src='${url}' style='max-width:750px'>no video</video></p>`
          }
          break
        case 'music':
          html = `<p style="height:0px"></p><p><audio controls src='${url}'>no audio</audio></p>`
          break
        case 'attachment':
          html = `<a href='${url}' download='${url}'>${name}</a>`
          break
        default:
          html = `<p style="text-align: center"><img src='${url}' style='max-width:750px'  alt='${id}'/></p>`
      }
      return html
    },
    async handleConfirm () {
      if (!this.form.uploadFile) {
        this.$message('请先上传文件')
        return
      }
      if (this.form.uploadFile instanceof Array) {
        if (!this.form.uploadFile.length) {
          this.$message('请先上传文件')
          return
        }
        const that = this
        for (let index = 0; index < this.form.uploadFile.length; index++) {
          const d = that.form.uploadFile[index]
          await that.handleUpload({
            ...that.form,
            ...d
          }, index)
        }
      } else {
        this.handleUpload(this.form)
      }
    },
    async handleUpload (form, index) {
      this.$emit('handleLoading', true)
      let { uploadFile, ...data } = form
      api.uploadRichFile(uploadFile).then(res => {
            this.msgSuccess("上传成功")
            let fineName = res.data.file_name
            let fileUrl = res.data.file_path
            this.$emit('handleInsertHtml', this.getHtml(fileUrl, fineName), { url: fileUrl, fileName: fineName, videoCover: null}, form)
          if (index === this.form.uploadFile.length - 1) {
            this.form.uploadFile = this.resourceType === 'insertimage' || this.resourceType === 'attachment' ? [] : ''
          }
          this.$emit('handleLoading', false)
        }).catch(() => {
          this.$emit('handleLoading', false)
        })
      // const dt = await this.$request.fetchUpload(uploadFile).then(res => {
      //   if (res.code === 200) {
      //     this.$message({
      //       message: '上传成功',
      //       type: 'success'
      //     })
      //     const fileUrl = this.$getPath(res.data.fileUrl)
      //     this.$emit('handleInsertHtml', this.getHtml(fileUrl, data.fileName,res.data.resourceId), { url: fileUrl, id: res.data.resourceId, fileName: data.fileName, videoCover: res.data.videoCover }, form)
      //   }
      //   if (index === this.form.uploadFile.length - 1) {
      //     this.form.uploadFile = this.resourceType === 'insertimage' || this.resourceType === 'attachment' ? [] : ''
      //   }
      //   this.$emit('handleLoading', false)
      // }).catch(() => {
      //   this.$emit('handleLoading', false)
      // })
      return {}
    }
  },
  mounted () {
  }
}
</script>
<style lang="scss" scoped>
.resource-upload-container{
  .resource-item{
    height: 290px;
    border: 1px solid #e8e8e8;
    padding-top: 10px;
    border-radius: 4px;
  }
}
</style>
